<template>
	<view class="splash-box">
		<view class="toptext" @click="LinkIndex" v-if="Token">
			<view class="text">{{$t('Jump')}}</view>
			<view class="time">{{ time }}</view>
		</view>
		<view :class="lang?'top-content':'top-content no-lang'">
			<image src="../../static/images/Group.png" mode="widthFix"></image>
			<view class="title">DikiDiki</view>
			<view class="sub-title" v-if="!LangFlag">يىشىل يىمەكلىك ساغلام ھايات</view>
			<view class="sub-title">{{$t('GreenHealthyLife')}}</view>
		</view>
		<view class="footer">
			<image src="../../static/images/Image.png" mode="widthFix"></image>
			<view class="node">diki diki V1.0</Var></var></view>
		</view>
		<view class="lang" v-if="!Token">
			<view :class="acbutton=='ug'?'button acbutton':'button'" @click="changeLang('ug')">ئۇيغۇرچە</view>
			<view :class="acbutton=='cn'?'button acbutton':'button'" @click="changeLang('cn')">中文</view>
		</view>
		<Loading :show="loadshow" :text="$t('Loading')"></Loading>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/all.js';
	export default {
		data() {
			return {
				time: 3,
				acbutton: false,
				lang: uni.getStorageSync('lang'),
				code: '',
				loadshow: false,
				LangFlag: uni.getStorageSync('lang')
			};
		},
		computed: {
			Token() {
				return this.$store.state.token;
			},

		},
		onLoad() {
			if (this.$store.state.token) {
				let interval = setInterval(() => {
					this.time--;
					if (this.time == 0) {
						clearInterval(interval);
						this.LinkIndex();
					}
				}, 1000)
			} else {
				this.code = this.getUrlCode().code; // 截取code
				if (this.code == null || this.code === '' || this.code == undefined) {} else {
					this.getlogin(this.code);
				}
			}


		},
		methods: {
			LinkIndex() {
				uni.redirectTo({
					url: '/pages/main/main'
				});
			},
			changeLang(lang) {
				console.log(lang, '++++++++++++++')
				if (lang == 'ug') {
					this.$i18n.locale = 'ug';
					this.$store.commit('setLang', 'ug')
				} else {
					this.$i18n.locale = 'cn';
					this.$store.commit('setLang', 'cn')
				}
				uni.setStorageSync('lang', lang);
				this.acbutton = lang;
				this.getCode();
				// setTimeout(() => {
				// 	uni.redirectTo({
				// 		url: '/pages/main/splasaddres'
				// 	});
				// }, 200)
			},

			//登录
			getCode() {
				var local = window.location.href.replace(/\#/g, "%23"); // 当前H5页面的url
				// var local = 'http://dikidiki.kompas.world/api/auth'
				var appid = 'wxa4e9e34d21e281c9';
				var scope = "snsapi_base"
				this.code = this.getUrlCode().code; // 截取code
				// 如果没有code，则去请求
				if (this.code == null || this.code === '' || this.code == undefined) {
					var wxUrl =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`;
					console.log(wxUrl, '++++^^^^^^^^^+++++')
					window.location.href = wxUrl;
					this.loadshow = true;
				}
			},

			getUrlCode() {
				// 截取url中的code方法
				var url = location.href; //获取打开的公众号的路径
				let winUrl = url;
				var theRequest = new Object();
				if (url.indexOf('?') != -1) {
					var str = url.substr(url.indexOf('?') + 1);
					var strs = str.split('&');
					for (var i = 0; i < strs.length; i++) {
						var items = strs[i].split('=');
						theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
					}
				}
				return theRequest;
			},

			getlogin(code) {
				let that = this;
				this.loadshow = true;
				login({
					code: code
				}).then(res => {
					if (res.code == 200) {
						let data = res.body;
						that.$store.commit('setUsertoken', data.token);
						that.$store.commit('setUserinfo', data.userinfo);
						this.loadshow = false;
						const url = this.ridUrlParam(window.location.href, ['code', 'state']);
						const parts = url.split("#");
						window.location.href = parts[0] + '#/pages/main/main';
					}

				})
			},
			ridUrlParam(url, params) {
				/**
				 * 删除URL中指定search参数,会将参数值一起删除
				 * @param {string} url 地址字符串
				 * @param {array} aParam 要删除的参数key数组，如['name','age']
				 * @return {string} 返回新URL字符串
				 */
				for (var index = 0; index < params.length; index++) {
					var item = params[index];
					var fromIndex = url.indexOf(item + "="); //必须加=号，避免参数值中包含item字符串
					if (fromIndex !== -1) {
						// 通过url特殊符号，计算出=号后面的的字符数，用于生成replace正则
						var startIndex = url.indexOf("=", fromIndex);
						var endIndex = url.indexOf("&", fromIndex);
						var hashIndex = url.indexOf("#", fromIndex);

						var reg = "";
						if (endIndex !== -1) {
							// 后面还有search参数的情况
							var num = endIndex - startIndex;
							reg = new RegExp(item + "=.{" + num + "}");
							url = url.replace(reg, "");
						} else if (hashIndex !== -1) {
							// 有hash参数的情况
							var num = hashIndex - startIndex - 1;
							reg = new RegExp("&?" + item + "=.{" + num + "}");
							url = url.replace(reg, "");
						} else {
							// search参数在最后或只有一个参数的情况
							reg = new RegExp("&?" + item + "=.+");
							url = url.replace(reg, "");
						}
					}
				}
				var noSearchParam = url.indexOf("=");
				if (noSearchParam === -1) {
					url = url.replace(/\?/, ""); // 如果已经没有参数，删除？号
				}
				return url;
			},

		}
	}
</script>

<style lang="scss" scoped>
	.splash-box {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		padding: 0rpx 50rpx;
		position: relative;

		.toptext {
			position: absolute;
			top: 4%;
			right: 5%;
			display: flex;
			align-items: center;
			//  border: 1px solid #fff;
			padding: 5px 15px;
			border-radius: $uni-border-radius-base;
			background-color: $uni-color-parbg;
			font-size: $uni-font-size-base;

			.text {
				margin-right: 10px;
			}

			.time {

				border-radius: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.top-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 200rpx;

			.title {
				margin-top: 10rpx;
				font-size: 50rpx;
				color: $uni-color-topic;
			}

			.sub-title {
				margin-top: 10rpx;
				font-weight: 500;
				font-size: $uni-font-size-base;
			}

			image {
				width: 250rpx;
			}
		}

		.no-lang {
			padding-top: 150rpx;
			padding-bottom: 50rpx;
		}

		.footer {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 200rpx;
			color: $uni-color-paraphrase;
		}
	}

	.lang {
		width: 100%;
		position: absolute;
		top: 43%;
		left: 0%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.button {
			width: 40%;
			padding: 20rpx 0rpx;
			border-radius: $uni-border-radius-base ;
			font-size: $uni-font-size-base;
			background-color: $uni-bg-color-input;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;
		}

		.acbutton {
			color: #fff;
			background-color: $uni-color-topic;
		}
	}
</style>